<template>
    <div>
    <!--header-->
    <headers></headers>
    <!--header end-->


    <div class="top-banner solution-banner">

        <div class="banner-inner">
            <h1>产品解决方案</h1>
            <p>为客户提供“一站式”解决方案</p>
        </div>

    </div>
    <div class="solution-container">


        <div class="solution-con-inner">
            <div class="panel-title">
                <div class="panel-title-first">
                    <span class="title-line"></span>
                    <h1>智慧城管及大数据</h1>
                    <span class="title-line"></span>
                </div>
            </div>
            <div class="solution-box">


                <div class="solution-box-item">

                    <div class="solution-normal">
                        <div class="solution-img"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181031/1540987108.png" width="100%">
                        </div>
                        <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181031/1540974837.png"></span>
                        <h4 class="solution-tit">智慧城管大数据</h4>
                    </div>
                    <div class="solution-hover">
                        <div class="solution-hover-con">
                            <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181031/1540976866.png"></span>
                            <h4 class="solution-tit">智慧城管大数据</h4>
                            <p class="solution-des">搭建『智慧城管大数据平台』，作为城市管理数据统筹机构，集展示中心、数据中心、研判预警中心、运行指挥中...</p>
                            <a class="panel-btn-more solution-btn-more"
                                href="product-class_id-131-seo_config_id-145.html">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="solution-box-item">

                    <div class="solution-normal">
                        <div class="solution-img"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181031/1540983406.png" width="100%">
                        </div>
                        <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180725/1532515364.png"></span>
                        <h4 class="solution-tit">智慧城管一体化平台</h4>
                    </div>
                    <div class="solution-hover">
                        <div class="solution-hover-con">
                            <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180725/1532512435.png"></span>
                            <h4 class="solution-tit">智慧城管一体化平台</h4>
                            <p class="solution-des">建立服务决策、服务指挥、服务管理、服务公众的智慧城管架构，实现感知、分析、服务、指挥、监察“五位一体...</p>
                            <a class="panel-btn-more solution-btn-more"
                                href="product-class_id-146-seo_config_id-145.html">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="solution-box-item">

                    <div class="solution-normal">
                        <div class="solution-img"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181031/1540987949.png" width="100%">
                        </div>
                        <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181031/1540977105.png"></span>
                        <h4 class="solution-tit">人工智能视频监督</h4>
                    </div>
                    <div class="solution-hover">
                        <div class="solution-hover-con">
                            <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181031/1540979272.png"></span>
                            <h4 class="solution-tit">人工智能视频监督</h4>
                            <p class="solution-des">利用先进的人工智能视频分析技术，为城市管理提供智能化监督、精细化的管理、执法高效落地 ，并探索“非接...</p>
                            <a class="panel-btn-more solution-btn-more"
                                href="product-class_id-152-seo_config_id-145.html">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="solution-box-item">

                    <div class="solution-normal">
                        <div class="solution-img"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181031/1540962881.png" width="100%">
                        </div>
                        <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181029/1540815985.png"></span>
                        <h4 class="solution-tit">共建共治共享公众服务</h4>
                    </div>
                    <div class="solution-hover">
                        <div class="solution-hover-con">
                            <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181029/1540816556.png"></span>
                            <h4 class="solution-tit">共建共治共享公众服务</h4>
                            <p class="solution-des">加强公众与城市管理部门之间的互动，形成“多元共治、良性互动”的城市治理模式，打造“人人参与、共治共享...</p>
                            <a class="panel-btn-more solution-btn-more"
                                href="product-class_id-160-seo_config_id-145.html">查看详情</a>
                        </div>
                    </div>
                </div>



            </div>
        </div>


        <div class="solution-con-inner">
            <div class="panel-title">
                <div class="panel-title-first">
                    <span class="title-line"></span>
                    <h1>智慧环卫</h1>
                    <span class="title-line"></span>
                </div>
            </div>
            <div class="solution-box">


                <div class="solution-box-item">

                    <div class="solution-normal">
                        <div class="solution-img"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181031/1540965473.png" width="100%">
                        </div>
                        <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180418/1524049107.png"></span>
                        <h4 class="solution-tit">智慧环卫一体化管理云平台</h4>
                    </div>
                    <div class="solution-hover">
                        <div class="solution-hover-con">
                            <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180418/1524052262.png"></span>
                            <h4 class="solution-tit">智慧环卫一体化管理云平台</h4>
                            <p class="solution-des">打通环卫道路保洁、垃圾收运、垃圾分类、处理场地管理、公厕管理等环卫业务，形成智慧环卫一体化管理体系</p>
                            <a class="panel-btn-more solution-btn-more"
                                href="product-class_id-106-seo_config_id-115.html">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="solution-box-item">

                    <div class="solution-normal">
                        <div class="solution-img"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181031/1540968085.png" width="100%">
                        </div>
                        <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181029/1540815005.png"></span>
                        <h4 class="solution-tit">保洁人员智慧管理</h4>
                    </div>
                    <div class="solution-hover">
                        <div class="solution-hover-con">
                            <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181029/1540818831.png"></span>
                            <h4 class="solution-tit">保洁人员智慧管理</h4>
                            <p class="solution-des">落实“定人、定岗、定量、定责”机制，实现环卫深度保洁和标准化管理，逐步建立“智慧型、全覆盖、动态化”...</p>
                            <a class="panel-btn-more solution-btn-more"
                                href="product-class_id-148-seo_config_id-115.html">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="solution-box-item">

                    <div class="solution-normal">
                        <div class="solution-img"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181128/1543400660.png" width="100%">
                        </div>
                        <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180524/1527155243.png"></span>
                        <h4 class="solution-tit">保洁车辆智慧管理</h4>
                    </div>
                    <div class="solution-hover">
                        <div class="solution-hover-con">
                            <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180524/1527155742.png"></span>
                            <h4 class="solution-tit">保洁车辆智慧管理</h4>
                            <p class="solution-des">将环卫保洁车辆作业监管、结果督查、应急调度、信息管理等车辆管理应用的各个方面整合到一个系统，实现环卫...</p>
                            <a class="panel-btn-more solution-btn-more"
                                href="product-class_id-144-seo_config_id-115.html">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="solution-box-item">

                    <div class="solution-normal">
                        <div class="solution-img"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181031/1540991754.png" width="100%">
                        </div>
                        <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181029/1540821551.png"></span>
                        <h4 class="solution-tit">智慧公厕管理</h4>
                    </div>
                    <div class="solution-hover">
                        <div class="solution-hover-con">
                            <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181029/1540823254.png"></span>
                            <h4 class="solution-tit">智慧公厕管理</h4>
                            <p class="solution-des">全面提升公厕智慧化进程，实现公厕智慧化、科技化、服务化的建设目标</p>
                            <a class="panel-btn-more solution-btn-more"
                                href="product-class_id-150-seo_config_id-115.html">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="solution-box-item">

                    <div class="solution-normal">
                        <div class="solution-img"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181128/1543407234.png" width="100%">
                        </div>
                        <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181029/1540818074.png"></span>
                        <h4 class="solution-tit">垃圾收运智慧管理</h4>
                    </div>
                    <div class="solution-hover">
                        <div class="solution-hover-con">
                            <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181029/1540816838.png"></span>
                            <h4 class="solution-tit">垃圾收运智慧管理</h4>
                            <p class="solution-des">打通环卫垃圾收集、运输、处置全流程，实现垃圾流转全周期的“智能化、信息化、精细化”垃圾收运一体化管理...</p>
                            <a class="panel-btn-more solution-btn-more"
                                href="product-class_id-149-seo_config_id-115.html">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="solution-box-item">

                    <div class="solution-normal">
                        <div class="solution-img"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181128/1543405361.png" width="100%">
                        </div>
                        <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180524/1527159580.png"></span>
                        <h4 class="solution-tit">“滴滴”式大件垃圾收运</h4>
                    </div>
                    <div class="solution-hover">
                        <div class="solution-hover-con">
                            <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180524/1527153327.png"></span>
                            <h4 class="solution-tit">“滴滴”式大件垃圾收运</h4>
                            <p class="solution-des">打造“互联网+”时代的垃圾收运新模式，推动垃圾收运由被动管理向主动服务转变。</p>
                            <a class="panel-btn-more solution-btn-more"
                                href="product-class_id-143-seo_config_id-115.html">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="solution-box-item">

                    <div class="solution-normal">
                        <div class="solution-img"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181031/1540961437.png" width="100%">
                        </div>
                        <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181029/1540821512.png"></span>
                        <h4 class="solution-tit">环卫共建共治共享公众服务</h4>
                    </div>
                    <div class="solution-hover">
                        <div class="solution-hover-con">
                            <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181029/1540814745.png"></span>
                            <h4 class="solution-tit">环卫共建共治共享公众服务</h4>
                            <p class="solution-des">实现“服务、管理、处置”闭环的公共服务体系，加强公众与城市管理部门之间的互动，形成“多元共治、良性互...</p>
                            <a class="panel-btn-more solution-btn-more"
                                href="product-class_id-161-seo_config_id-115.html">查看详情</a>
                        </div>
                    </div>
                </div>



            </div>
        </div>


        <div class="solution-con-inner">
            <div class="panel-title">
                <div class="panel-title-first">
                    <span class="title-line"></span>
                    <h1>智慧执法</h1>
                    <span class="title-line"></span>
                </div>
            </div>
            <div class="solution-box">


                <div class="solution-box-item">

                    <div class="solution-normal">
                        <div class="solution-img"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180420/1524219459.png" width="100%">
                        </div>
                        <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180330/1522406647.png"></span>
                        <h4 class="solution-tit">智慧执法管理云平台</h4>
                    </div>
                    <div class="solution-hover">
                        <div class="solution-hover-con">
                            <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180330/1522406364.png"></span>
                            <h4 class="solution-tit">智慧执法管理云平台</h4>
                            <p class="solution-des">全面覆盖执法协调指挥、执法案件管理、执法队伍监督、执法事件处置、执法存证管理、执法监查考核、执法专项...</p>
                            <a class="panel-btn-more solution-btn-more"
                                href="product-class_id-105-seo_config_id-114.html">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="solution-box-item">

                    <div class="solution-normal">
                        <div class="solution-img"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181031/1540964237.png" width="100%">
                        </div>
                        <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180330/1522409272.png"></span>
                        <h4 class="solution-tit">可视化指挥调度</h4>
                    </div>
                    <div class="solution-hover">
                        <div class="solution-hover-con">
                            <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180330/1522408522.png"></span>
                            <h4 class="solution-tit">可视化指挥调度</h4>
                            <p class="solution-des">实现智能高效的可视化（应急）指挥调度</p>
                            <a class="panel-btn-more solution-btn-more"
                                href="product-class_id-121-seo_config_id-114.html">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="solution-box-item">

                    <div class="solution-normal">
                        <div class="solution-img"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180420/1524214168.png" width="100%">
                        </div>
                        <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180330/1522406882.png"></span>
                        <h4 class="solution-tit">智慧案件管理</h4>
                    </div>
                    <div class="solution-hover">
                        <div class="solution-hover-con">
                            <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180330/1522409571.png"></span>
                            <h4 class="solution-tit">智慧案件管理</h4>
                            <p class="solution-des">以案件处理过程为核心，实现执法案件处理流程全覆盖</p>
                            <a class="panel-btn-more solution-btn-more"
                                href="product-class_id-125-seo_config_id-114.html">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="solution-box-item">

                    <div class="solution-normal">
                        <div class="solution-img"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181030/1540897955.png" width="100%">
                        </div>
                        <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181031/1540974821.png"></span>
                        <h4 class="solution-tit">渣土运输智慧管理</h4>
                    </div>
                    <div class="solution-hover">
                        <div class="solution-hover-con">
                            <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181031/1540980431.png"></span>
                            <h4 class="solution-tit">渣土运输智慧管理</h4>
                            <p class="solution-des">实现渣土运输管理常态化、规范化、制度化</p>
                            <a class="panel-btn-more solution-btn-more"
                                href="product-class_id-154-seo_config_id-114.html">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="solution-box-item">

                    <div class="solution-normal">
                        <div class="solution-img"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180420/1524214660.png" width="100%">
                        </div>
                        <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180330/1522405018.png"></span>
                        <h4 class="solution-tit">4G执法视频图传</h4>
                    </div>
                    <div class="solution-hover">
                        <div class="solution-hover-con">
                            <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180330/1522405481.png"></span>
                            <h4 class="solution-tit">4G执法视频图传</h4>
                            <p class="solution-des">配合全能执法终端，全面实现执法全过程视音频记录管理</p>
                            <a class="panel-btn-more solution-btn-more"
                                href="product-class_id-123-seo_config_id-114.html">查看详情</a>
                        </div>
                    </div>
                </div>



            </div>
        </div>


        <div class="solution-con-inner">
            <div class="panel-title">
                <div class="panel-title-first">
                    <span class="title-line"></span>
                    <h1>网格化城市管理</h1>
                    <span class="title-line"></span>
                </div>
            </div>
            <div class="solution-box">


                <div class="solution-box-item">

                    <div class="solution-normal">
                        <div class="solution-img"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181030/1540899250.png" width="100%">
                        </div>
                        <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181030/1540900769.png"></span>
                        <h4 class="solution-tit">数字化城市管理</h4>
                    </div>
                    <div class="solution-hover">
                        <div class="solution-hover-con">
                            <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20181030/1540908932.png"></span>
                            <h4 class="solution-tit">数字化城市管理</h4>
                            <p class="solution-des">为城市管理部门提升发现、处置、解决问题的能力，有效推动城市问题的解决，推动动态、闭环、长效化管理，实...</p>
                            <a class="panel-btn-more solution-btn-more"
                                href="product-class_id-155-seo_config_id-127.html">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="solution-box-item">

                    <div class="solution-normal">
                        <div class="solution-img"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180420/1524214161.png" width="100%">
                        </div>
                        <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180418/1524046454.png"></span>
                        <h4 class="solution-tit">创新网格化社会治理联动</h4>
                    </div>
                    <div class="solution-hover">
                        <div class="solution-hover-con">
                            <span class="solution-icon"><img src="http://www.xbcx.com.cn/cms/uploads/image/20180418/1524050194.png"></span>
                            <h4 class="solution-tit">创新网格化社会治理联动</h4>
                            <p class="solution-des">打造 “综合治理联动 共建共治共享” 的社会治理新格局</p>
                            <a class="panel-btn-more solution-btn-more"
                                href="solution_daliandong-class_id-129-seo_config_id-127.html">查看详情</a>
                        </div>
                    </div>
                </div>



            </div>
        </div>


    </div>


    <div class="float-box">
        <div class="qq-advice">
            <a class="qq-advice-inner" href="http://wpa.qq.com/msgrd?v=3&uin=2366320826&site=qq&menu=yes"
                target="_blank">
                <img src="images/public/advice_icon.png">
                <span>在线咨询</span>
            </a>
            <div class="tel-advice">
                <div class="tel-icon"><img src="images/public/phone.png"></div>
                <div class="tel-box">
                    <img src="images/public/phone2.png">
                    <div class="tel-box-r">
                        <p>咨询热线</p>
                        <span>400-864-9582</span>
                    </div>
                </div>
            </div>
        </div>

        <a class="back-top"></a>
    </div>

    <!--footer-->
    <footers></footers>
    <!--footer end-->
    </div>
</template>

<script>
import $ from 'jquery'
import headers from '../component/headers'
import footers from '../component/footers'
export default {
    name : 'solution',
     data() {
    return {};
  },
  components : {
    headers,
    footers
  },
  methods: {
    bdshare() {
      $(function() {
        var share_target_url;
        var share_target_sharetitle;
        var share_target_shareabstract;

        $(".bdsharebuttonbox>a").mouseover(function() {
          var Tthis = $(this);
          var url = window.location.href;
          var oneurl;

          if ($(this).hasClass("popVideo")) {
            var url = "http://zf.xbcx.com.cn/shareVideo.php";
          } else {
            var url = window.location.href;
          }

          oneurl = url;
          if (url.indexOf("#") > 0) {
            oneurl = url.substring(0, url.indexOf("#"));
          }
          if (oneurl.indexOf("?") > 0) {
            share_target_url =
              oneurl +
              "&" +
              Tthis.data("suffixe") +
              "&video_id=" +
              Tthis.data("sharevideo");
          } else {
            share_target_url =
              oneurl +
              "?" +
              Tthis.data("suffixe") +
              "&video_id=" +
              Tthis.data("sharevideo");
          }
          share_target_sharetitle = Tthis.data("sharetitle");
          share_target_shareabstract = Tthis.data("shareabstract");
        });

        window._bd_share_config = {
          common: {
            onBeforeClick: function(cmd, config) {
              if (!share_target_url) {
                share_target_url = window.location.href;
              }
              config.bdUrl = share_target_url;
              config.bdText = share_target_sharetitle;
              config.bdDesc = share_target_shareabstract;
              return config;
            },
          },

          share: [
            {
              tag: "share_1",
              bdSize: 24,
            },
            {
              tag: "share_2",
              bdSize: 32,
            },
          ],
        };
      });
    },
    common() {
      //导航下拉菜单
      $(".header-nav-menu")
        .mouseenter(function() {
          var hasChild = $(this).find(".header-subnav").length;
          if (hasChild > 0) {
            $(this)
              .find(".header-subnav")
              .stop()
              .slideDown("fast");
          }
        })
        .mouseleave(function() {
          $(this)
            .find(".header-subnav")
            .stop()
            .slideUp("fast");
        });

      $(window).scroll(function() {
        if ($(window).scrollTop() > 0) {
          $(".header").addClass("scroll");
        } else {
          $(".header").removeClass("scroll");
        }
      });
      
      var scrollFun = function() {
        var width = ($(".scroll-container").width() - 60) / 4;
        $(".scroll-item").width(width);
        var img_len = $(".scroll-item").length;
        var img_wd = width;

        var num = 0;
        if (img_len < 5) {
          $(".scroll-next,.scroll-prev").hide();
          $(".scroll-container ul").css({
            width: "100%",
            "text-align": "center",
          });
        }
        if ($(".scroll-container ul li").length > 4) {
          $(".scroll-container ul").append($(".scroll-container ul").html());
        }

        $(".scroll-next").click(function() {
          if (num == img_len) {
            num = 0;
            $(".scroll-container ul").css("left", 0);
          }
          num++;
          move(-num);
        });

        $(".scroll-prev").click(function() {
          if (num == 0) {
            num = img_len;
            $(".scroll-container ul").css("left", -num * (img_wd + 13) + "px");
          }
          num--;
          move(-num);
        });

        function move(num) {
          $(".scroll-container ul")
            .stop()
            .animate({
              left: num * (img_wd + 13) + "px",
            });
        }
      };
      // scrollFun();
      autoRound(".honor-cell", ".honor-img-big div");
      autoRound(".about_team_peo", ".about_team_text");
      function autoRound(item, detail) {
        var $item = $(item);
        var $detail = $(detail);

        var i = 0;
        var length = $item.length;
        var t = setInterval(function() {
          i++;
          if (i == length) {
            i = 0;
          }
          $item
            .eq(i)
            .addClass("cur")
            .siblings()
            .removeClass("cur");
          $detail
            .eq(i)
            .addClass("show")
            .siblings()
            .removeClass("show");
        }, 4000);

        $item.mouseenter(function() {
          clearInterval(t);
          var i = $(this).index();
          $(this)
            .addClass("cur")
            .siblings()
            .removeClass("cur");
          $detail
            .eq(i)
            .addClass("show")
            .siblings()
            .removeClass("show");
        });

        $item.mouseleave(function() {
          var i = $(this).index();
          t = setInterval(function() {
            i++;
            if (i == length) {
              i = 0;
            }
            $item
              .eq(i)
              .addClass("cur")
              .siblings()
              .removeClass("cur");
            $detail
              .eq(i)
              .addClass("show")
              .siblings()
              .removeClass("show");
          }, 4000);
        });
      }

      indexBanner();
      function indexBanner() {
        var n = 0;
        var t = n;
        var width = $(".banner-inner-tab .tab-item").width();
        var count = $(".banner-inner-item").length;
        $(".banner-inner-tab .tab-line img").width(width);

        $(".banner-inner-tab .tab-item").click(function() {
          var i = $(this).index();
          n = i;
          if (i >= count) {
            return;
          }

          $(".banner-inner-item")
            .eq(i)
            .addClass("show")
            .siblings()
            .removeClass("show");
          $(".tab-line img").css({
            transform: "translateX(" + width * i + "px)",
          });
        });

        t = setInterval(showAuto, 8000);

        $(".banner-inner-tab").hover(
          function() {
            clearInterval(t);
          },
          function() {
            t = setInterval(showAuto, 8000);
          }
        );

        function showAuto() {
          n = n >= count - 1 ? 0 : ++n;
          $(".banner-inner-tab .tab-item")
            .eq(n)
            .trigger("click");
        }
      }

      $(".back-top").on("click", function() {
        $("body,html").animate({ scrollTop: 0 }, 500);
        return true;
      });

      $(".product-shouqi").click(function() {
        var w = $(".product-posit").width();
        $(".product-posit").css("margin-left", -w);
        setTimeout(function() {
          $(".product-zhankai").show();
          $(this).hide();
        }, 400);
      });
      $(".product-zhankai").click(function() {
        $(".product-posit").css("margin-left", 0);
        $(".product-shouqi").show();
        $(this).hide();
      });
    },
    video_player() {
      var palyers = {};
      window.TPlayer = {
        play: function(eleID, fileId, auto_play, size) {
          if (!size) {
            size = {
              width: 614,
              height: 381,
            };
          }
          var option = {
            auto_play: auto_play,
            file_id: fileId,
            app_id: "1252000488",
            width: size.width,
            height: size.height,
          };
          /*调用播放器进行播放*/
          palyers[eleID] = new qcVideo.Player(
            /*代码中的id_video_container将会作为播放器放置的容器使用, 可自行替换*/
            eleID,
            option
          );
          return palyers[eleID];
        },
        pasue: function(eleID) {
          palyers[eleID].pause();
        },
        pasueAll: function() {
          $.each(palyers, function(i, n) {
            n.pause();
          });
        },
        change: function(eleID, fileId, auto_play, size) {
          if (!palyers[eleID]) {
            this.play(eleID, fileId, auto_play, size);
          }
          palyers[eleID].changeVideo({
            app_id: "1252000488",
            file_id: fileId,
            auto_play: auto_play,
          });
        },
        livePlay: function(eleID, url, size) {
          //http://ptest-meeket.xbwq.com.cn/meeket/viewer/live/viewer/index?a=d722031322a3224696f5d6f63622c22283131322a3224696f5566796c622b7
          if (!size) {
            size = {
              width: 614,
              height: 381,
            };
          }
          if ($("iframe_" + eleID).length) {
            return;
          }
          $("#" + eleID).html(
            '<iframe id="iframe_' +
              eleID +
              '" src="' +
              url +
              "&is_full_play=1&v_height=" +
              size.height +
              '"' +
              'height="' +
              size.height +
              '" width="' +
              size.width +
              '" frameborder="0"></iframe>'
          );
        },
        liveStop: function(eleID) {
          $("#" + eleID).html("");
        },
      };
    },
  },
  mounted() {
    this.bdshare();
    this.common();
    this.video_player();
  },
};
</script>